define([
    'jquery',
    'underscore',
    'backbone',
    //'text!templates/form/form_add_admin.html'
    ], function($, _, Backbone,loginTemplate){
        var $html_loadding = '<div class="caculation-report"><img style="margin-left:170px" src="'+$template_admincp_url+'img/standard/loaders/loading64.gif"/></div>';
        var galleryView = Backbone.View.extend({
            el: $("#main"),
            initialize: function(){
				
            },
            events: {
                
            },

            view: function(){
                var url = location.href;
                if(typeof oTable != "undefined"){
                    $("#serverSide").DataTable().fnDestroy();
                }
                oTable = $('#serverSide').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": $.fn.dataTable.pipeline({
                        url: url,
                        pages: 5 // number of pages to cache
                    }),
                    "columns": [
                        { "data": "id" },
                        { "data": "cata_title" },
                        { "data": "gallery_title" },
                        { "data": "description" },
                        { 
                            "data": "created_at",
                            "render": render_created_datatable 
                        },
                        { 
                            "data": "upload",
                            "orderable": false,
                            "searchable": false
                        },
                        { 
                            "data": "edit",
                            "orderable": false,
                            "searchable": false
                        },
                        { 
                            "data": "delete",
                            "orderable": false,
                            "searchable": false
                        },
                    ]
                })// .fnSetFilteringDelay(700);
            },

            add: function(){
                $('#catalogue').select2({placeholder: "Select Catalogue"});
            },

            edit: function(){
                $('#catalogue').select2({placeholder: "Select Catalogue"});
            },
            
            upload: function(){
               $(".deleteImage").click(function(){
                    var id = $(this).attr('ids');
                    var $this = $(this);
                    bootbox.confirm("Are you sure?", function(result) {
                        if(result == true){
                            $.ajax({
                                url: $admincp_url + 'gallery/deleteImage',
                                type: 'post',
                                data: 'id='+id,
                                async: false,
                                success: function(){
                                    $this.parent().remove();
                                }
                            });
                        }
                    });
                });
                
                $("#saveOrderImages").click(function(){
                    var idGal = $("#idGal").val();
                    var arrData = [];
                    $.each( $(".orderImages"), function( value ) {
                    arrData.push({'id': $(this).attr('ids'), 'value': $(this).val()});
                });
                var dataJson = JSON.stringify(arrData);
                    bootbox.confirm("Are you sure?", function(result) {
                        if(result == true){
                            $.ajax({
                                url: $admincp_url + 'gallery/saveOrderImages',
                                type: 'post',
                                data: 'idGal='+idGal+'&dataJson=' +dataJson ,
                                async: false,
                                success: function(){
                                    
                                }
                            });
                        }
                    });
                  
                });

                var dropbox = $('#dropbox'),
                    message = $('.message', dropbox);
                dropbox.filedrop({
                    // The name of the $_FILES entry:
                    paramname:'pic',
                    
                    maxfiles: 10,
                    maxfilesize: 5,
                    url: $admincp_url+'gallery/do_upload',
                    data: {
                        idGal: function(){
                           var idGal = $("#idGal").val();
                           return idGal;
                        },
                        pathGal: function(){
                           var pathGal = $("#pathGal").val();
                           return pathGal;
                        }
                    },
                    uploadFinished:function(i,file,response){
                        $.data(file).addClass('done');
                        // response is the JSON object that post_file.php returns
                    },
                    
                    error: function(err, file) {
                        switch(err) {
                            case 'BrowserNotSupported':
                                showMessage('Your browser does not support HTML5 file uploads!');
                                break;
                            case 'TooManyFiles':
                                alert('Too many files! Please select 10 at most! (configurable)');
                                break;
                            case 'FileTooLarge':
                                alert(file.name+' is too large! Please upload files up to 5mb (configurable).');
                                break;
                            default:
                                break;
                        }
                    },
                    
                    // Called before each upload is started
                    beforeEach: function(file){
                        if(!file.type.match(/^image\//)){
                            alert('Only images are allowed!');
                            
                            // Returning false will cause the
                            // file to be rejected
                            return false;
                        }
                    },
                    
                    uploadStarted:function(i, file, len){
                        createImage(file);
                    },
                    
                    progressUpdated: function(i, file, progress) {
                        $.data(file).find('.progress').width(progress);
                    }
                     
                });
            
                var template = '<div class="preview">'+
                                '<span class="imageHolder">'+
                                    '<img />'+
                                    '<span class="uploaded"></span>'+
                                '</span>'+
                                '<div class="progressHolder">'+
                                    '<div class="progress"></div>'+
                                '</div>'+
                            '</div>'; 
            
            
                function createImage(file){

                    var preview = $(template), 
                        image = $('img', preview);
                        
                    var reader = new FileReader();
                    
                    image.width = 100;
                    image.height = 100;
                    
                    reader.onload = function(e){
                        
                        // e.target.result holds the DataURL which
                        // can be used as a source of the image:
                        
                        image.attr('src',e.target.result);
                    };
                    
                    // Reading the file as a DataURL. When finished,
                    // this will trigger the onload function above:
                    reader.readAsDataURL(file);
                    
                    message.hide();
                    preview.appendTo(dropbox);
                    
                    // Associating a preview container
                    // with the file, using jQuery's $.data():
                    
                    $.data(file,preview);
                }

                function showMessage(msg){
                    message.html(msg);
                }
            },

            render: function(){
                if(typeof this[$app.action] != 'undefined'){
                    new this[$app.action];
                }
            }
        });
        return galleryView = new galleryView;
    });
